<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../lib/layui-v2.5.6/layui/css/layui.css">
</head>
<style> 
.layui-form-label{
    padding-left: 0px;
    width: 60px;
}
.layui-form-radio {
    margin-right: 0px;
    padding-right: 5px;
}


</style>
<body>
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
          <div class="layui-col-md7" style="height: 93px;">
            <div class="layui-card">
              <div class="layui-card-body  " style="height: 58px;">
               
                <form id="form" class="layui-form" action="">                    
                    <div class="layui-form-item">
                      <label class="layui-form-label">车辆选择:</label>
                      <div class="layui-input-inline">
                        <select id="carSel" lay-filter="carSel" name="quiz1">
                        </select>
                      </div>
                    </div>                  
                </form>

              </div>
            </div>
          </div>
          <div class="layui-col-md5">
            <div class="layui-card">
              <div  class="layui-card-body ">
                <form id="form" class="layui-form" action=""> 


                    <div class="layui-form-item">

                        <div class="layui-inline">
                            <label class="layui-form-label">图标尺寸</label>
                            <div class="layui-input-inline" style="width: 160px;">
                                <input type="radio" lay-filter="iconRadio" name="iconSize" value="carBig" title="大" checked>
                                <input type="radio" lay-filter="iconRadio" name="iconSize" value="carMiddle" title="中" >
                                <input type="radio" lay-filter="iconRadio" name="iconSize" value="carLittle" title="小" >
                            </div>
                        </div>
                   
                       <div class="layui-inline"> 
                            <label class="layui-form-label">跟踪车辆</label>
                            <div class="layui-input-inline" style="width: 60px;">
                                <input type="checkbox" lay-filter="followCar" lay-text="开启|关闭" checked name="switch" lay-skin="switch">
                            </div>
                        </div>

                        <div class="layui-inline"> 
                            <label class="layui-form-label">实时轨迹</label>
                            <div class="layui-input-inline" style="width: 60px;">
                                <input type="checkbox" lay-filter="trackCar" lay-text="开启|关闭"  name="switch" lay-skin="switch">
                            </div>
                        </div>
                    </div>

                </form>
              </div>
            </div>
          </div>
         
          <div class="layui-col-md12">
            <div class="layui-card">
              <div class="layui-card-body" style="height: 660px;">
                 <div id="mapDiv" style="height: 100%;"></div>
              </div>
            </div>
          </div>
          
        </div>
      </div>
</body>
<script src="../../lib/layui-v2.5.6/layui/layui.js"></script>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=YS7BZ-KO2HP-GYBDJ-LKSJ7-QDMKE-WVBG7"></script>

<script>
layui.use(['form', 'jquery','layedit', 'laydate','element'], function(){
    form = layui.form;
    $ = layui.$;
    var timerArr = [];
    var pointLinArr = [];

    var map="";
    var latitude = "";
    var longitude = "";

    var carId = "";
    var markerIcon = "";
    var isFollowCar = true;
    var isTrackCar = false;
    var polyline = "";      
    var marker ="";
    $(function(){
        getCarList();
        initMap();
        carId = $("#carSel").val();
        getMakerIcon("carBig")
        makePoint();
        //监听切换车辆
        form.on('select(carSel)', function(data){
            pointLinArr = [];
            carId = data.value;
            //移除定时器
            for(var k = 0 ; k < timerArr.length; k++){
                clearInterval(timerArr[k]);
            }
            makePoint();
        }); 
        //监听图标尺寸
        form.on('radio(iconRadio)', function(data){
            getMakerIcon(data.value)
            marker.setIcon(markerIcon)
        });    
        //监听是否跟踪车辆
        form.on('switch(followCar)', function(data){
            isFollowCar = data.elem.checked
        });
        //监听是否开启轨迹线
        form.on('switch(trackCar)', function(data){
            pointLinArr = [];
            isTrackCar = data.elem.checked
        });
    })
    //地图初始化
    function initMap() {
        var myLatlng = new qq.maps.LatLng(41.6986,123.435);
        var myOptions = {
            zoom: 15,
            center: myLatlng,
            mapTypeId: qq.maps.MapTypeId.ROADMAP
        }
        map = new qq.maps.Map(document.getElementById("mapDiv"), myOptions);

    }

    //获取车辆列表
    function getCarList(){
        $.ajax({
            url:"http://device-dev.horus.net.cn/api/vehicle/getVehicle",
            data:{
                "Authorization":"eyJhbGciOiJIUzUxMiJ9.eyJ1aWQiOjIsImFwcElkIjoiaG9ydXMiLCJyb2xlTGlzdFN0ciI6IiIsImV4cCI6NDcxNzk2NjgzNn0.r1G1EaNV2dPraRooct5TtsQ8gSIRcR7kL49xQzpL8BtPWeZOGgaTgO8xZS4xzWKY9rppuZV0eko84Jb2RAmPNQ"
            },
            type:"get",
            async:false,
            success:function(res){
                carList = res.content;
                var opt = "";
                for(var i = 0; i < carList.length;i++){
                    opt += "<option value='" + carList[i].id +"'";
                    if(i == 0){
                        opt += "selected "
                    }
                    opt +=" >"+ carList[i].number +"</option>";
                }
                
                $("#carSel").html(opt);
                form.render('select')                   
            }
        })
    }

    //根据车辆id获取最后坐标点
    function getLastLocationByCarId(carId){
        $.ajax({
            url:"http://device-dev.horus.net.cn/api/vehicle/getLastPosition",
            data:{
                "Authorization":"eyJhbGciOiJIUzUxMiJ9.eyJ1aWQiOjIsImFwcElkIjoiaG9ydXMiLCJyb2xlTGlzdFN0ciI6IiIsImV4cCI6NDcxNzk2NjgzNn0.r1G1EaNV2dPraRooct5TtsQ8gSIRcR7kL49xQzpL8BtPWeZOGgaTgO8xZS4xzWKY9rppuZV0eko84Jb2RAmPNQ",
                "vid":carId
            },
            type:"get",
            async:false,
            success:function(res){
                latitude = res.content.latitude;
                longitude = res.content.longitude;
                console.log(res.content)
                


            }
        })
    }




    //在地图上描绘坐标点
    function makePoint(){
        //var j = 0.0000;//模拟运动,开发中使用.上线前需要删掉
        var timer = setInterval( 
                function(){
                    //获取最后坐标点
                    getLastLocationByCarId(carId);  
                    //获取新的坐标点并加载到地图上
                    var lastLocation = new qq.maps.LatLng(latitude ,longitude );
                    map.center = lastLocation;
                    //判断地图上是否有坐标点,如果有,则直接改变点的坐标,如果没有,则生成一个新的坐标点
                    if(marker != "" && marker != undefined){
                        marker.setPosition(lastLocation) //移动坐标点
                    }else{
                        marker = new qq.maps.Marker({
                            position: lastLocation,
                            map: map,
                            icon:markerIcon
                        });
                    }
                    //是否地图重置中心点,即跟随目标
                    if(isFollowCar){
                        map.panTo(lastLocation);
                    }
                    //是否生成实时轨迹 
                    if(isTrackCar){
                        pointLinArr.push(lastLocation);
                    }
                    //这样做是为了轨迹线是实时的, 有且只有一根轨迹线
                    if(polyline != "" && polyline != undefined){
                        polyline.setPath(pointLinArr)

                    }else{
                        polyline = new qq.maps.Polyline({
                            path: pointLinArr,
                            strokeColor: '#FF0000',
                            strokeWeight: 3,
                            cursor:"pointer",
                            strokeDashStyle:"dash",
                            map
                        });
                    }
                    
                    
                    //j++
                }, 
            1000);
        timerArr.push(timer)
    }

    //车辆图标
    function getMakerIcon(iconName){
        if(iconName == "iconBig"){
            var size = new qq.maps.Size(64,64);//图片大小
            var origin = new qq.maps.Point(0, 0);//
            var anchor = new qq.maps.Point(32, 64);//锚点坐标x,y
        }else if(iconName == "iconMiddle"){
            var size = new qq.maps.Size(48,48);//图片大小
            var origin = new qq.maps.Point(0, 0);//
            var anchor = new qq.maps.Point(24, 48);//锚点坐标x,y
        }else if(iconName == "iconLittle"){
            var size = new qq.maps.Size(24,24);//图片大小
            var origin = new qq.maps.Point(0, 0);//
            var anchor = new qq.maps.Point(12, 24);//锚点坐标x,y
        }
        markerIcon = new qq.maps.MarkerImage(
                "../../lib/image/"+iconName+".png",
                size,
                origin,
                anchor
            );
    }


})
</script>
</html>